<template>
    <div class="birthday2">
      <van-tabs v-model="active"  :sticky="positions">
        <van-tab v-for="(item,index) in births" :key="index">
          <div slot="title">
            {{item}}
          </div>

          <div class="birthday2-content">
            <van-list
              v-model="loading"
              :finished="finished"
              @load="getNowBirth"
            >
              <div v-if="typeof memberList=='string'" style="margin:10px 0;color:#ddd;font-size:12px;">{{memberList}}</div>

              <van-row v-else v-for="(m,index) in memberList" :key="index" class="member-lists"  @click.native="details(m.vip_id,m.photo,m.vip_name,m.sex,m.phone,m.birth_date,m.level)">
                <van-col span="6">
                  <img v-if="m.photos==0" class="imgDivs"  :src="memberDetails.imgaes+''+m.photo">
                  <img v-else class="imgDivs"  src="../../images/noimg.jpg" alt="">
                </van-col>
                <van-col span="18">
                  <van-row class="m-c-r" >
                    <van-col span="24" style="padding:3px 0;color:#666;">
                      <span class="memberNames" style="font-weight: bold;">{{m.vip_name}}</span>
                      <span v-if="m.sex==0"><i class="iconfont icon-nan" style="color:#31A8E0!important;"></i></span>
                      <span v-else-if="m.sex==1"><i class="iconfont icon-nv" style="color:#FF78DA!important;"></i></span>
                      <span v-else ><!--<i class="iconfont icon-nan"></i>-->(保密)</span>
                    </van-col>
                    <van-col span="12" class="m-r-c" >
                      <i class="iconfont icon-shouji1"></i> {{m.phone}}
                    </van-col>
                    <van-col span="12" class="m-r-c">
                      <i class="iconfont iconI  icon-shengri"></i>{{m.birth_date}}
                    </van-col>
                    <van-col span="24" class="m-r-c">
                      <i class="iconfont iconI icon-dengji"></i>{{m.level_name}}
                    </van-col>
                  </van-row>
                </van-col>
              </van-row>
              <div class="noDatas" :style="{display:block}">
                数据已加载完
              </div>
            </van-list>
          </div>


        </van-tab>
      </van-tabs>

      <!--返回按钮-->
      <van-button class="birthday-back" @click="backFn">
        <i class="iconfont icon-icon_reply" style="display: block"></i>
        返回
      </van-button>
    </div>
</template>

<script>
  import { mapState } from 'vuex';
    export default {
        name: "birthday",
        data(){
          return {
            active:0,
            nowBirth:"",//开始生日
            toBirth:"",//结束生日
            births:["今天生日","明天生日"],

            block:"none",
            memberList:[],
            page:1,
            pageSize:10,
            loading: false,
            finished: false,
            positions:true,
            sys: {}
          }
        },
      watch:{
        active(v,oldv){
          this.memberList=[];
          this.loading=true;
          this.finished=false;
          this.page=1;
          this.getNowBirth();
        }
      },
      computed: {
        ...mapState({
          memberDetails:"data"
        })
      },
      methods:{
        backFn(){
          // this.$router.go(-1);
          this.$router.push({name: 'home'});
        },
        //获取当天生日的会员
        getNowBirth(){
          var a;
          if(!this.active){
            a=this.GetDateStr(0);
          }else{
            a=this.GetDateStr(1);
          }
          var $this=this;
          $this.block="none";
          this.$http.member.get('/vip',{
            params:{
              page:$this.page,
              pageSize:$this.pageSize,
              birth_date_bigin:a,
              birth_date_end:a
            }
          })
            .then(function (response) {
              // console.log(response.data.data);
              var empId = localStorage.getItem('empId');
              if(empId&&response.data.code){
                $this.$toast.fail(response.data.message);
                $this.$router.go(-1)
                return;
              }
              $this.page=response.data.data.current_page+1;

              var len = 0
              for (var i in response.data.data.data) {
                len++
                if(response.data.data.data[i].photo == ''){
                  response.data.data.data[i].photos=1;
                }else{
                  var timestamp = (new Date()).getTime();
                  response.data.data.data[i].photos=0
                  response.data.data.data[i].photo=response.data.data.data[i].photo+'?c='+timestamp
                }
                $this.memberList.push(response.data.data.data[i]);
              }
              $this.loading = false;
              if(!len){
                $this.memberList="未找到相关数据";
                $this.block="none";
                $this.finished = true;
              }else if ($this.memberList.length >= response.data.data.total) {
                $this.finished = true;
                $this.block = 'block'
              }


            })
            .catch(function (error) {
              $this.$toast.fail('登陆过期，请重新登陆');
              // console.log(error);
            });


          // console.log(this.startBirth);
        },
        //获取日期的方法 返回月-日的格式（昨天-1，今天0，明天1，后天是2）
        GetDateStr(AddDayCount) {
          var dd = new Date();
          dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
          var y = dd.getFullYear();
          var m = dd.getMonth()+1;//获取当前月份的日期
          if(m<10){
            m="0"+m;
          }
          var d = dd.getDate();
          if(d<10){
            d="0"+d;
          }
          // return y+"-"+m+"-"+d;
          return m+"-"+d;
        },
        //点击进入会员详情
        details(userid,photos,name,sex,phone,birth,level){

          var idx=photos.indexOf("accessory");
          if(idx==-1){

            this.memberDetails.touXiang = 1;
          }else{

            this.memberDetails.touXiang = photos;
          }
          this.memberDetails.memberID = userid;

          this.memberDetails.vipName =name;
          this.memberDetails.phone = phone;
          this.memberDetails.birth = birth;
          this.memberDetails.dengJi = level;
          this.memberDetails.sex = sex;

          this.$router.push({name: 'memberDetails',params:{
              url:"birthday",
              vipId:userid
            }});

        },
        // 获取系统设置
        getXT(){
          this.$http.setting.get('/systemsetupval').then(res => {
            // console.log(res)
            let getsystem = (code) => Object.values(res.data.data).filter(item => item.code == code)[0].val;
            this.sys = {
              sys_setting_home_zdlsspphb  : getsystem('sys_setting_home_zdlsspphb'), //    是否显示：终端零售商品排行榜
              sys_setting_home_zdlsphb  : getsystem('sys_setting_home_zdlsphb'), //     是否显示：终端零售排行榜：
              sys_setting_home_dp  : getsystem('sys_setting_home_dpxsphb'), //     是否显示：店铺销售排行榜：
              sys_setting_home_sr  : getsystem('sys_setting_home_hysrtx'), //     是否显示：会员生日提醒：
              sys_setting_home_hyxztb  : getsystem('sys_setting_home_hyxztb'), //      是否显示：会员新增同比：
            }
            // console.log(this.sys)
            if(!parseInt(this.sys.sys_setting_home_sr)){
              this.$toast.fail('系统设置中未配置！');
              this.$router.go(-1)
              return
            }

          })
        }
      },
      mounted(){
        // var empId = parseInt(localStorage.getItem('empId'));
        // if(!empId){
        //   this.getXT();
        // }
        this.getXT();

      }


    }
</script>

<style scoped>
  .birthday2  .iconfont {
    font-size: 12px!important;
  }
  .van-tabs__content{
    background: #fff!important;
  }
  .birthday2 .birthday-back{
    position: fixed;
    bottom:100px;
    right:10px;
    background:rgba(0,0,0,.5);
    width:55px;
    height:auto!important;
    color:#fff;
    font-size:12px;
    padding:12px 0;
    border-radius: 5px;
    line-height: initial;
    border:0;
  }
  .icon-nan{
    color:skyblue;
  }
  .icon-nv{
    color:#625161;
  }
  .birthday2 .imgDivs{
    width:70px!important;
    border-radius: 50%;
    height:70px;
    position: relative;
    text-align: center;
    margin:8px 0;
  }
  .m-c-r{
    text-align: left;
    font-size: 12px;
    color:#AFAFAF;
    padding:0 10px 0 20px;
  }
  .m-r-c{
    padding:1px 0;
    font-size:14px;;
  }
  .memberNames{
    font-size:14px;
  }
</style>
